"use client";
import { useAppDispatch } from "@/store/client";
import { addNowData } from "@/store/client/modules/reactdndStore";
import { useHoverPositionView } from "@/utils/reactDnd/useHoverPosition";
import StyleView from ".";
import { Children } from "react";

// 添加这一行，使组件变为 Client Component

interface MyComponentProps {
    data: any
    refDrage: any
    children: any
}

const HoverView: React.FC<MyComponentProps> = (props) => {
    const { data, children, refDrage } = props
    const { useHoverPositionComponent, debouncedHoverEnd, isTop, isBottom, isNow } = useHoverPositionView()
    const dispatch = useAppDispatch()

    const handleClick = (e: { stopPropagation: () => void; }) => {
        e.stopPropagation();
        dispatch(addNowData(data))
    }
    return (
        <>
            <div className={`${isTop(data) ? "h-1 bg-amber-700 absolute w-full top-0" : ""} ${isBottom(data) ? "h-1 bg-amber-700 absolute w-full bottom-0" : ""}`} />
            {data.targetId &&
                <div className={`min-h-5 ${isNow(data) ? "relative w-auto h-full  border-1 border-amber-200" : ''} `}>
                    {isNow(data) && <StyleView refDrage={refDrage} />}
                    <div onClick={handleClick} >
                        {children}
                    </div>

                </div>
            }
        </>
    )
}
export default HoverView;